<template>
    <main>
		<van-sticky>
			<van-search class="my-search-bar" v-model="searchKey" shape="round" background="var(--body-bg-color)"
						readonly placeholder="搜索本店商品" @click="router.push({path:'/shop/search/inputKey',query:{shopId:props.shopId}})"/>

		</van-sticky>
		<van-cell-group v-for="(cate,index) in category" key="index" inset class="mg10">
			<van-cell is-link size="large" class="first-level" :url="'/shop/search?shopId='+shopId+'&cate='+cate.id">
				<template #title><b>{{cate.label}}</b></template>
			</van-cell>
			<div class="cate-group-wrap" v-if="cate.children&&cate.children.length>0">
				<ul class="cate-group">
					<li class="cate-group-item" v-for="(sub,i) in cate.children" key="i">
						<router-link :to="'/shop/search?shopId='+shopId+'&cate='+sub.id" class="item-link">{{sub.label}}</router-link>
					</li>
				</ul>
			</div>
		</van-cell-group>
		<van-divider>已经到底了</van-divider>
	</main>
</template>
<style lang="scss" scoped>
main{
	--van-primary-color:v-bind(themeColor);
	.my-search-bar{
		:deep(.van-search__content){
			background-color:var(--white-color);
			//border:1px solid var(--van-primary-color);
			box-sizing: border-box;
		}
		//:deep(.van-cell){
		//	margin:-1px;
		//}
	}
	>.mg10{margin-top:0!important;}
}
.first-level{
	&::after{
		display:none;
	}
}
.cate-group-wrap{
	padding:0 16px 10px 16px;
	.cate-group{
		display:flex; margin:0 -10px -10px 0; padding:0; flex-wrap: wrap;
		&-item{
			display:inline-block; margin:0;padding:0 10px 10px 0;width:50%;
			.item-link{
				display:block;background-color:var(--van-cell-border-color);height:36px; line-height:36px;
				color:var(--font-second-color);
				padding-left:12px; font-size:14px; border-radius: 8px;
			}
		}
	}
}
</style>
<script lang="ts" setup>
//props
const props=defineProps({
	themeColor:{
		type:String,
		default:import.meta.env.VITE_THEME_COLOR
	},
	shopId:{
		type:String,
		required:true,
	},
})

//data
const searchKey=ref('')
//定义商品类型树，还需要完成从店铺solr中异步读取
const category = ref(<Array<any>>[])
category.value = [
	{
		id:'01',label:'手机终端',
		children:[
			{ id:'0101',label:'5G手机', },
			{ id:'0102',label:'4G手机', },
			{ id:'0103',label:'另类手机', },
		]
	},
	{
		id:'02',label:'智慧生活',
		children:[
			{ id:'0201',label:'游戏娱乐', },
			{ id:'0202',label:'智能控制', },
			{ id:'0203',label:'智能固话', },
			{ id:'0204',label:'联通超清',},
			{ id:'0205',label:'联通看家', },
			{ id:'0206',label:'健康护理', },
			{ id:'0207',label:'智能厨电', },
			{ id:'0208',label:'软终端', },
			{ id:'0209',label:'办公设备', },
			{ id:'0210',label:'智能家电', },
			{ id:'0211',label:'安防传感终端', },
			{ id:'0212',label:'联通组网', },
			{ id:'0213',label:'车载出行', },
			{ id:'0214',label:'其他智能终端', },
		]
	},
	{
		id:'03',label:'智慧固网',
		children:[
			{ label:'IPTV机顶盒', },
			{ label:'ONU终端', },
			{ label:'XDSL终端',},
			{ label:'家庭网关', },
			{ label:'其他客户接入类',},
		]
	},
	{
		id:'04',label:'个人智能终端',
		children:[
			{ id:'0401',label:'智能手表', },
			{ id:'0402',label:'智能手环', },
			{ id:'0403',label:'平板电脑', },
			{ id:'0405',label:'智能耳机', },
			{ id:'0406',label:'智能机器人', },
			{ id:'0407',label:'XR终端', },
			{ id:'0408',label:'PC台式机', },
			{ id:'0409',label:'笔记本电脑', },
			{ id:'0410',label:'随身Wifi', },
		]
	},
	{
		id:'06',label:'3C配件',
		children:[
			{ id:'0601',label:'数码配件', },
			{ id:'0602',label:'电脑配件', },
			{ id:'0603',label:'其它配件', },
		]
	},
	{
		id:'10',label: '权益类产品',
	}
]
const route= useRoute()  //当前页路由
const router = useRouter()
const path = route.path

//methods
</script>